<script setup>
import { ref,onMounted } from 'vue'
import Info from './info.vue'
import {deleteApi, pageApi, deleteBatchApi, roleMenuApi, updateRoleMenuApi} from "../../../api/role";
import {ElMessage, ElMessageBox} from "element-plus";
import {useUserStore}  from '../../../stores/userstore'
const {perms} =useUserStore()
const tableData=ref({})
// 表单状态
const filterState = ref(true)
// 表单数据--查询对象
const formData = ref({
  page: 1,
  size: 10,
  name: '',
  level: 0
})
// 页面打开就会执行
onMounted(()=>{
  loadData()
})
//查询 请求接口
const loadData=async ()=>{
  const r=await pageApi(formData.value);
  tableData.value=r.data;
}
// 分页 size
const onSizeChange = (val) => {
  loadData()
}
// 分页  page
const onCurrentChange = (val) => {
  loadData()
}
// 角色编辑
const infoRef = ref()
const onUserInfo = (row) => {
  infoRef.value.state = true
  if (row) {
    infoRef.value.formData.id = row.id
    infoRef.value.formData.info = row.info
    infoRef.value.formData.level = row.level
    infoRef.value.formData.name = row.name
    infoRef.value.formData.parentId = row.parentId
  }
}
// 角色删除
const onDelete = (row) => {
  ElMessageBox.confirm('确定删除该条数据吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    //接口请求 删除角色
    const r=await deleteApi({id:row.id});
    if(r.code==0){
      ElMessage({
        type: 'success',
        message: '删除成功'})
      //重新加载请求
      loadData()
    }else {
      ElMessage.error(r.data)
    }
  }).catch(() => {
        ElMessage({
          type: 'info',
          message: '用户取消'})
  })
}

// 批量选择 获取
let ids = ref([])
const onSelectionChange = (val) => {
  ids.value = val
}
const onDeleteBatch=async ()=>{
  var data=new Array();
  for (let i = 0; i < ids.value.length; i++) {
    data[i]=ids.value[i].id;
  }
  const r=await deleteBatchApi(data);
  if(r.code==0){
      //成功
      ElMessage({
        type: 'success',
        message: r.data
      })
      //重新加载请求
      loadData()
    }else {
      ElMessage({
        type: 'info',
        message: r.data
      })
    }
}


//角色权限的分配
const setrole=ref(false)
const treeProps={
  label: 'name',
  value: 'id',
  children:'children'
}
//原来的数据
const roleMenuOld=ref({})
//新设置的对象
const roleMenuNew=ref({}) //rid mids[]
const onAssignMenu=async (row)=>{
  roleMenuNew.value.rid=row.id
  const r=await roleMenuApi({rid:row.id});
  if(r.code==0){
    setrole.value=true
    roleMenuOld.value=r.data;
  }
}
//对应 菜单的el-tree
const treeMenu=ref({})
//对应 权限的el-tree
const treePerm=ref({})
const onChangeMenu=async ()=>{
  //取值
  //1.组装
  roleMenuNew.value.mids=new Array();
  roleMenuNew.value.mids.push(...treeMenu.value.getCheckedKeys())
  roleMenuNew.value.mids.push(...treePerm.value.getCheckedKeys())
  console.log(roleMenuNew.value.mids);
  //2.请求接口
  const r=await updateRoleMenuApi(roleMenuNew.value);
  if(r.code==0){
    ElMessage({
      type: 'success',
      message: '角色权限分配成功'
    })
    setrole.value=false
  }else {
    ElMessage.error(r.data)
  }
}
</script>
<template>
  <Box>
    <!-- 逻辑层 -->
    <Info ref="infoRef" @flush="loadData"/>
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true" :model="formData">
        <el-form-item label="角色名称">
          <el-input placeholder="请输入角色名称" v-model="formData.username" />
        </el-form-item>
        <el-form-item label="级别">
          <el-select v-model="formData.level" placeholder="角色等级" style="width: 120px">
            <el-option label="一级" value="1"/>
            <el-option label="二级" value="2"/>
            <el-option label="三级" value="3"/>
            <el-option label="四级" value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"> <span class="iconfont icon-sousuo"></span>搜索 </el-button>
          <el-button type="default"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="onUserInfo">
          <span class="iconfont icon-jiahao"></span>添加
        </el-button>
        <el-button type="danger" :disabled="!ids.length" @click="onDeleteBatch">
          <span class="iconfont icon-shanchu"></span>批量删除
        </el-button>
        <el-button type="warning" @click="$message.warning('演示数据，禁止操作')">
          <span class="iconfont icon-xiazai-"></span>导出
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle>
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row>
    <!-- 按钮组 -->
    <!-- 表格 -->
    <el-table :data="tableData.data" :border="true" @selection-change="onSelectionChange">
      <el-table-column type="selection" align="center" fixed="left"></el-table-column>
      <el-table-column label="序号" prop="id" align="center"></el-table-column>
      <el-table-column label="角色名称" prop="name"  align="center"></el-table-column>
      <el-table-column label="等级" prop="level" align="center"></el-table-column>
      <el-table-column label="上级名称" prop="parentName" align="center"></el-table-column>
      <el-table-column label="说明" prop="info" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="ctime" align="center" width="200"></el-table-column>
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scoped">
          <el-button type="primary" link size="small" @click="onUserInfo(scoped.row)">
            <span class="iconfont icon-bianji"></span>修改
          </el-button>
          <el-button type="primary" v-show="perms.includes('role:del')" link size="small" @click="onDelete(scoped.row)">
            <span class="iconfont icon-shanchu"></span>删除
          </el-button>
          <el-button type="primary" link size="small" @click="onAssignMenu(scoped.row)">
            <span class="iconfont icon-gengduo"></span>分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="formData.pagenum"
      v-model:page-size="formData.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
    <!-- 分页 -->
    <!-- 内容 -->
    <!--对角色分配权限-->
    <el-dialog
        v-model="setrole"
        :title="`角色权限分配`"
        width="600"
        :before-close="() => (setrole = false)"
    >
      <!-- 内容 -->
      <el-form
          size="large"
          label-width="80"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单列表">
              <el-tree
                  :data="roleMenuOld.menus"
                  ref="treeMenu"
                  node-key="id"
                  check-strictly="true"
                  :default-checked-keys="roleMenuOld.mids"
                  :props="treeProps"
                  show-checkbox></el-tree>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限列表">
              <el-tree
                  :data="roleMenuOld.perms"
                  ref="treePerm"
                  node-key="id"
                  check-strictly="true"
                  :default-checked-keys="roleMenuOld.pids"
                  :props="treeProps" show-checkbox></el-tree>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="">
          <el-button type="primary" @click="onChangeMenu">确定分配</el-button>
          <el-button type="default" @click="state = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 内容 -->
    </el-dialog>
  </Box>
</template>
